<template>
  <div class="detail">
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-card
      :num="list.quantity"
      :price="list.price"
      :desc="list.name"
      :title="list.name"
      :thumb="list.coverImg"
    />
    <!-- <van-button type="info" block @click="addcart(list._id)">加入购物车</van-button> -->
    <div class="imgs" v-html="list.content"></div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="badge" @click="gocart" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addcart(list._id)"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { addcartapi,getcartapi} from "../../api/cart";
import { Toast } from "vant";
import { reqdetailapi } from "../../api/products";
export default {
  data() {
    return {
      list: {},
      badge:"",
    };
  },
  computed: {},
  watch: {},

  methods: {
    // 跳转进入购物车
    gocart() {
      this.$router.push("/cart");
    },
    onClickLeft() {
      Toast("返回");
      this.$router.go(-1);
    },
    // 获取商品详情
    async getdetail(id) {
      const result = await reqdetailapi(id);
      console.log(result);
      this.list = result;
    },
    //加入购物车
    async addcart(id) {
      const result = await addcartapi(id);
      // console.log(result);
      if (result) {
        Toast("加入购物车成功");
        this.getcart();
      }
    },
    //获取购物车列表
      async getcart() {
      const result = await getcartapi();
      console.log(result);
      this.cart = result;
      const cartlength=result;
      this. badge=cartlength.length;
      console.log(cartlength.length);
      localStorage.setItem("badge", this.badge);
      this.$store.commit("address/changebadge", this.badge)
    },
  },
  created() {
    const id = this.$route.params.id;
    this.getdetail(id);
    this.getcart();
  },
  mounted() {},
  components: {},
};
</script>
<style>
.detail .img {
  width: 100%;
  height: 200px;
}
.detail p img {
  width: 100%;
  height: 500px;
}
</style>
